<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"><link rel="icon" href="img/icon.jpg">
    <meta name="易农" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<body>
<header class="head">
    <h3 class="head_button" ><a href="/">首页</a></h3>
    <h3 class="head_button"><a href="/hurt">小麦病虫害</a></h3>
    <h3 class="head_button" ><a href="/mostLike_addr">最受欢迎农产品价格比较</a></h3>
    <h3 class="head_button" ><a href="/line">农业总产值预测</a></h3>
    <h3 class="head_button" ><a style="background-color: gray"  href="/line_product">历史农产品价格</a></h3>
</header>
<section class="section">
    <div id="container" style="max-width:800px;height:400px"></div>
</section>
<script>
    //原生js发送Ajax
    function httpPost(url,param) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url,true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(param);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
                var r =  JSON.parse(xhr.responseText);
                initChart(r.data);
            }
        };
    }
    var param = 'method=/biz/price/listMap';
    // var param = 'method=/ruoyi-admin/biz/price_f/list&name='+1;
    // var param = 'method=/ruoyi-admin/biz/price_p/list&name='+1;
    var r = httpPost('/api',param);
    function initChart(series) {
        var chart = Highcharts.chart('container', {
            title: {
                text: '历史农产品价格图'
            },
            // subtitle: {
            //     text: '数据来源：www.sdaeu.edu.cn'
            // },
            yAxis: {
                title: {
                    text: '农产品价格图'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2015
                }
            },
            series: series,
            // series: [{
            //     name: '水稻',
            //     data: [248.44, 287.12, 329.80, 382.52, 443.72, 506.90, 620.96, 731.63]
            // }
            //     , {
            //         name: '玉米',
            //         data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            //     }
            // ],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });

    }



</script>
</body>
</html>